<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      
      <el-form-item label="地址" prop="address">
        <el-input
          v-model="queryParams.address"
          placeholder="请输入地址"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="业主姓名" prop="homeownersId">
      <el-input
          v-model="queryParams.homeownersName"
          placeholder="请输入业主姓名"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

       
      <el-form-item label="合同状态" prop="contractStatus">
        <el-select v-model="queryParams.contractStatus" placeholder="合同状态" clearable style="width: 240px">
          <el-option v-for="dict in contract_status_dic" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb3">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['fang:homeowners:addinfo']"
        >新增</el-button>
      </el-col>
        
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="homeownersList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <!-- <el-table-column label="自增ID" width="55" align="center" prop="id" /> -->


      <!-- <el-table-column label="业主ID" align="center" prop="homeownersId" /> -->

      <el-table-column label="业主信息" align="center" prop="homeownersName" />

      <el-table-column label="联系方式" align="center" prop="homeownersPhone" width="120" />

      <el-table-column label="产证编号" align="center" prop="houseCertificateNumber" />
      <el-table-column label="合同编号" align="center" prop="contractNumber" width="160" />
      <el-table-column label="合同状态" align="center" prop="contractStatus"  :formatter="contractStatusText"  />
      <el-table-column label="合同开始" align="center" prop="contractStartTime" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.contractStartTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同终止" align="center" prop="contractEndTime" width="120">
        <template #default="scope">
          <span>{{ parseTime(scope.row.contractEndTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房源信息" align="center" prop="address" width="200" />
      <el-table-column label="户型/面积" align="center" prop="houseArea" />
      <el-table-column label="租金及管理费描述" align="center" prop="rentFeeDescribe" width="200" />
      <el-table-column label="房源状态" align="center" prop="houseStatus">
        <template #default="scope">
          <el-text>{{ getHouseStatusText(scope.row.houseStatus) }}</el-text>
        </template>
      </el-table-column>
      

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['fang:homeowners:query']">合同详情</el-button> 
          <el-button link type="primary" @click="handleHomeownersDetail(scope.row)" v-hasPermi="['fang:homeowners:query']">业主详情</el-button> 
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <HomeownerContractEditDialog 
      v-model="dialogVisible" 
      :homeownerId="editingHomeownerId"
      :contractId="editingContractId"
      @closed="handleDialogClosed"
    />
    
  </div>
</template>

<script setup name="Homeowners">
import { listHomeowners, getHomeowners, delHomeowners,  } from "@/api/fang/homeowners"
import HomeownerContractEditDialog from '@/components/HomeownerContractEditDialog/index.vue'
import { getHouseStatusText, getHomeownerContractStatusText } from '@/utils/enums'
import { parseTime } from "@/utils/ruoyi"

const { proxy } = getCurrentInstance()
const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex") 

const contract_status_dic = [
  { value: '1', label: '有效' },
  { value: '2', label: '无效' },
  { value: '0', label: '草稿' }
]
function contractStatusText(row, column, cellValue) {
    return getHomeownerContractStatusText(cellValue)
  }

const homeownersList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const title = ref("")

// 合同详情弹窗相关
const dialogVisible = ref(false)
const editingContractId = ref(null)
const editingHomeownerId = ref(null)

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    homeownersId: null,
    houseStatus: null,
    contractStartTime: null,
    contractEndTime: null,
    contractStatus: null,
    houseNumber: null,
    houseArea: null,
    houseCertificateNumber: null,
    address: null,
    rentFeeDescribe: null,
    contractFile: null,
    managementFeeFile: null,
    handoverFile: null,
  },
  rules: {
  }
})

const { queryParams, form, rules } = toRefs(data)



/** 查询业主合同列表 */
function getList() {
  loading.value = true
  listHomeowners(queryParams.value).then(response => {
    homeownersList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 取消按钮
function cancel() {
  open.value = false
  reset()
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    homeownersId: null,
    houseStatus: null,
    contractStartTime: null,
    contractEndTime: null,
    contractStatus: null,
    houseNumber: null,
    houseArea: null,
    houseCertificateNumber: null,
    address: null,
    rentFeeDescribe: null,
    contractFile: null,
    managementFeeFile: null,
    handoverFile: null,
    createBy: null,
    updateBy: null,
    createTime: null,
    updateTime: null
  }
  proxy.resetForm("homeownersRef")
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef")
  handleQuery()
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length != 1
  multiple.value = !selection.length
}

/** 新增按钮操作 */
function handleAdd() {
  reset()
  open.value = true
  title.value = "添加业主合同"

  // 新增改为进入 /fang/homeowner/create
  proxy.$tab.openPage("新增业主", '/fang/homeowner/create', {})


}

/** 合同详情按钮操作 */
function handleUpdate(row) {
  editingContractId.value = row.id
  editingHomeownerId.value = row.homeownersId
  dialogVisible.value = true
}

/** 弹窗关闭处理 */
function handleDialogClosed() {
  editingContractId.value = null
  editingHomeownerId.value = null
}

/** 业主详情按钮操作 */
function handleHomeownersDetail(row) {

  const homeownerId = row.homeownersId 
  proxy.$tab.openPage("委托合同详情"+homeownerId, '/fang/homeowner/' + homeownerId, {})


  // reset()
  // const _id = row.id || ids.value
  // getHomeowners(_id).then(response => {
  //   form.value = response.data
  //   open.value = true
  //   title.value = "修改业主合同"
  // })
}

 

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除业主合同编号为"' + _ids + '"的数据项？').then(function() {
    return delHomeowners(_ids)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

 
getList()
</script>
